<template>
  <div class="my-discussion">
    <div class="header">
      <h2>我的交流</h2>
      <div class="back-button">
        <el-button 
          type="primary" 
          icon="el-icon-back" 
          @click="goBackToCommunity"
          class="back-button"
        >
          返回交流社区
        </el-button>
      </div>
    </div>

<el-tabs v-model="activeTab" class="tabs">
      <el-tab-pane label="我发的帖子" name="topics">
        <div v-loading="topicsLoading" class="content">
          <el-empty v-if="!topicsLoading && myTopics.length === 0" description="暂无发布的帖子"></el-empty>
          <div v-else class="topic-items">
            <el-card v-for="topic in myTopics" :key="topic.topicId" class="topic-item" shadow="hover">
              <div class="topic-header">
                <h3 @click="viewTopicDetail(topic.topicId)">标题: {{ topic.title }}</h3>
                <span class="time">{{ formatTime(topic.createTime) }}</span>
              </div>
              <div class="topic-content" v-html="sanitizeHtml(topic.content)"></div>
              <div class="topic-footer">
                <el-tag size="small" type="info">
                  <i class="el-icon-view"></i> 浏览量: {{ topic.viewCount || 0 }}
                </el-tag>
                <el-tag size="small" type="info">
                  <i class="el-icon-chat-dot-round"></i> 评论数: {{ topic.replyCount || 0 }}
                </el-tag>
                <el-tag v-if="topic.courseName" size="small" type="success">
                  科目名: {{ topic.courseName }}
                </el-tag>
                <el-button 
                  size="small" 
                  type="green"  
                  @click="viewTopicDetail(topic.topicId)"
                  class="view-detail"
                >
                  查看详情 <i class="el-icon-arrow-right"></i>
                </el-button>
                <el-button 
                  size="small" 
                  type="danger" 
                  @click="deleteTopic(topic.topicId)"
                  class="delete-button"
                >
                  删除
                </el-button>
              </div>
            </el-card>
          </div>
              <div class="pagination-wrapper" v-if="myTopics.length > 0">
      <el-pagination
        @size-change="handleTopicsSizeChange"
        @current-change="handleTopicsCurrentChange"
        :current-page="topicsPagination.currentPage"
        :page-size="topicsPagination.pageSize"
        layout="prev, pager, next, jumper"
        :total="topicsPagination.total"
      >
      </el-pagination>
    </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="我的评论" name="comments">
        <div v-loading="commentsLoading" class="content">
          <el-empty v-if="!commentsLoading && myComments.length === 0" description="暂无发表的评论"></el-empty>
          <div v-else class="comment-items">
            <el-card v-for="comment in myComments" :key="comment.commentId" class="comment-item" shadow="hover">
              <div class="comment-header">
                <span class="time">{{ formatTime(comment.createTime) }}</span>
              </div>
              <div class="comment-content" v-html="sanitizeHtml(comment.content)"></div>
              <div class="comment-footer">
                <span>评论于帖子: {{ comment.topicTitle || '帖子不存在或被删除' }}</span>
                <el-button 
                  size="small" 
                  type="primary" 
                  @click="viewTopicDetail(comment.topicId)"
                >
                  查看帖子
                </el-button>
                <el-button 
                  size="small" 
                  type="danger" 
                  @click="deleteComment(comment.commentId)"
                  class="delete-comment-button"
                >
                  删除评论
                </el-button>
              </div>
            </el-card>
          </div>
              <div class="pagination-wrapper" v-if="myComments.length > 0">
      <el-pagination
        @size-change="handleCommentsSizeChange"
        @current-change="handleCommentsCurrentChange"
        :current-page="commentsPagination.currentPage"
        :page-size="commentsPagination.pageSize"
        layout="prev, pager, next, jumper"
        :total="commentsPagination.total"
      >
      </el-pagination>
    </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 弹窗 -->
    <el-dialog
      :title="topicDetail.title"
      v-model="showDetailDialog"
      width="80%"
      :before-close="handleClose"
    >
      <div class="topic-detail">
        <div class="topic-header">
          <span class="time">发布时间: {{ formatTime(topicDetail.createTime) }}</span>
          <span class="view-count">浏览量: {{ topicDetail.viewCount }}</span>
          <span class="reply-count">评论数: {{ topicDetail.replyCount }}</span>
        </div>
        <div class="topic-content" v-html="sanitizeHtml(topicDetail.content)"></div>
        <div v-if="topicDetail.courseName" class="topic-footer">
          <el-tag size="small" type="success">科目名: {{ topicDetail.courseName }}</el-tag>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDetailDialog = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { useUserStore } from '@/store/UserStore'; // 根据你的实际路径调整

export default {
  data() {
    return {
      activeTab: 'topics',
      username: '加载中...',
      userId: null,
      avatarUrl: '',
      myTopics: [],
      myComments: [],
      topicsPagination: {
      currentPage: 1,
      pageSize: 3, 
      total: 0
    },
    commentsPagination: {
      currentPage: 1,
      pageSize: 3, // 每页显示5条评论
      total: 0
    },
      topicsLoading: false,
      commentsLoading: false,
      showDetailDialog: false,
      topicDetail: {}
    };
  },
  setup() {
    const userStore = useUserStore();
    return { userStore };
  },
  methods: {
    goBackToCommunity() {
      this.$router.push({ name: 'UserCommunication' });
    },
    initUserInfo() {
      // 从 Pinia store 获取用户信息
      if (this.userStore.userInfo && this.userStore.userInfo.userId) {
        this.userId = this.userStore.userInfo.userId;
        this.username = this.userStore.userInfo.username || '用户';
        this.avatarUrl = this.userStore.userInfo.avatar || '';
        return true;
      } else {
        this.$message.warning('用户信息未获取，请重新登录');
        this.$router.push('/login');
        return false;
      }
    },
  async fetchMyTopics() {
  if (!this.initUserInfo()) return;
  
  this.topicsLoading = true;
  try {
    const response = await this.$axios.get('http://localhost:8080/topic/list-with-course', {
      params: {
        page: this.topicsPagination.currentPage,
        size: this.topicsPagination.pageSize, // 添加size参数
        userId: this.userId
      }
    });
    if (response.data && response.data.list) {
      this.myTopics = response.data.list;
      this.topicsPagination.total = response.data.total || 0;
    } else {
      this.myTopics = [];
      this.topicsPagination.total = 0;
      this.$message.warning('获取帖子数据异常');
    }
  } catch (error) {
    console.error('获取帖子列表失败:', error);
    this.$message.error('获取帖子列表失败');
  } finally {
    this.topicsLoading = false;
  }
},
// 在methods中添加
handleTopicsSizeChange(val) {
  this.topicsPagination.pageSize = val;
  this.fetchMyTopics();
},

handleTopicsCurrentChange(val) {
  this.topicsPagination.currentPage = val;
  this.fetchMyTopics();
},
async fetchMyComments() {
  if (!this.initUserInfo()) return;
  
  this.commentsLoading = true;
  try {
    const response = await this.$axios.get('http://localhost:8080/topic-comment/list-by-user', {
      params: {
        userId: this.userId,
        page: this.commentsPagination.currentPage,
        size: this.commentsPagination.pageSize
      }
    });
    
    if (response.data && Array.isArray(response.data.list)) {
      this.myComments = response.data.list.map(comment => ({
        ...comment,
        topicTitle: '',
        topicId: comment.topicId
      }));
      this.commentsPagination.total = response.data.total || 0;
      
      // 获取帖子标题的逻辑保持不变
      if (this.myComments.length > 0) {
        const topicIds = this.myComments
          .map(comment => comment.topicId)
          .filter(id => id)
          .filter((value, index, self) => self.indexOf(value) === index);
        
        if (topicIds.length > 0) {
          const topicResponse = await this.$axios.post(
            'http://localhost:8080/topic-comment/get-titles-by-id', 
            topicIds
          );
          if (topicResponse.data && topicResponse.data.length > 0) {
            const topicTitleMap = new Map(
              topicResponse.data.map(item => [item.topicId, item.title])
            );
            this.myComments.forEach(comment => {
              comment.topicTitle = topicTitleMap.get(comment.topicId) || '未知帖子';
            });
          }
        }
      }
    } else {
      this.myComments = [];
      this.commentsPagination.total = 0;
      this.$message.warning('获取评论数据异常');
    }
  } catch (error) {
    console.error('获取评论列表失败:', error);
    this.$message.error('获取评论列表失败');
  } finally {
    this.commentsLoading = false;
  }
},
  handleCommentsSizeChange(val) {
    this.commentsPagination.pageSize = val;
    this.fetchMyComments();
  },
  
  handleCommentsCurrentChange(val) {
    this.commentsPagination.currentPage = val;
    this.fetchMyComments();
  },
    viewTopicDetail(topicId) {
      if (topicId) {
        this.getTopicDetail(topicId);
      } else {
        this.$message.warning('无效的帖子ID');
      }
    },
    async getTopicDetail(topicId) {
      try {
        const response = await this.$axios.get('http://localhost:8080/topic/get', {
          params: { id: topicId }
        });
        if (response.data) {
          this.topicDetail = response.data;
          this.showDetailDialog = true;
        } else {
          this.$message.error('获取帖子详情失败');
        }
      } catch (error) {
        console.error('获取帖子详情失败:', error);
        this.$message.error('获取帖子详情失败');
      }
    },
    handleClose() {
      this.showDetailDialog = false;
    },
    async deleteTopic(topicId) {
      if (!topicId) {
        return this.$message.error('无效的帖子ID');
      }

      this.$confirm('确定要删除此帖子吗？此操作不可撤销。', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(async () => {
        try {
          const response = await this.$axios.delete('http://localhost:8080/topic/delete', {
            params: { topicId }
          });
          if (response.data === 1) {
            this.fetchMyTopics();
            this.showDetailDialog = false;
            this.$message.success('帖子已删除');
          } else {
            this.$message.error('删除帖子失败，请重试');
          }
        } catch (error) {
          console.error('删除帖子失败:', error);
          this.$message.error('删除帖子失败，请重试');
        }
      })
      .catch(() => {
        // 用户取消删除
      });
    },
    async deleteComment(commentId) {
      if (!commentId) {
        return this.$message.error('无效的评论ID');
      }

      this.$confirm('确定要删除此评论吗？此操作不可撤销。', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(async () => {
        try {
          const response = await this.$axios.delete('http://localhost:8080/topic-comment/delete', {
            params: { commentId }
          });
          if (response.data === 1) {
            this.fetchMyComments();
            this.$message.success('评论已删除');
          } else {
            this.$message.error('删除评论失败，请重试');
          }
        } catch (error) {
          console.error('删除评论失败:', error);
          this.$message.error('删除评论失败，请重试');
        }
      })
      .catch(() => {
        // 用户取消删除
      });
    },
    formatTime(time) {
      if (!time) return '未知时间';
      try {
        const d = new Date(time);
        const pad = n => n.toString().padStart(2, '0');
        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
      } catch (e) {
        return time;
      }
    },
    sanitizeHtml(html) {
      if (!html) return '';
      return html
        .replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
        .replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, function(match) {
          const allowedTags = ['b', 'i', 'u', 'strong', 'em', 'p', 'br', 'ul', 'ol', 'li', 'div', 'span'];
          const tagMatch = match.match(/<\/?(\w+)/);
          if (tagMatch && allowedTags.includes(tagMatch[1].toLowerCase())) {
            return match;
          }
          return '';
        });
    }
  },
  mounted() {
    this.initUserInfo();
    this.fetchMyTopics();
  },
  watch: {
    activeTab(newVal) {
      if (newVal === 'comments' && this.myComments.length === 0) {
        this.fetchMyComments();
      }
    }
  }
};
</script>

<style>
/* 添加返回按钮样式 */
.back-button {
  margin-left: auto;
  transition: all 0.3s ease;
}

.back-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.my-discussion {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  background: linear-gradient(135deg, #f0f9ff 0%, #cde6f8 100%);
  min-height: 100vh;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding: 20px 25px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(210, 230, 250, 0.8);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4a90e2, #63b3ed, #4a90e2);
}

.header h2 {
  margin: 0;
  color: #2c5282;
  font-size: 28px;
  font-weight: 600;
  position: relative;
  padding-left: 15px;
}

.header h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 4px;
  background: linear-gradient(to bottom, #4a90e2, #63b3ed);
  border-radius: 2px;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  margin-right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(74, 144, 226, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 600;
  color: #2c5282;
  margin-bottom: 3px;
  font-size: 20px;
}

.user-id {
  font-size: 15px;
  color: #5a6c84;
  background: rgba(113, 128, 150, 0.08);
  padding: 2px 6px;
  border-radius: 10px;
  display: inline-block;
}

.tabs {
  background: rgba(255, 255, 255, 0.98);
  padding: 0 20px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(210, 230, 250, 0.8);
  backdrop-filter: blur(8px);
}

.tabs >>> .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: rgba(210, 230, 250, 0.8);
}

.tabs >>> .el-tabs__active-bar {
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #4a90e2, #63b3ed);
}

.tabs >>> .el-tabs__item {
  font-weight: 500;
  color: #5a6c84;
  transition: all 0.3s;
}

.tabs >>> .el-tabs__item.is-active {
  color: #2c5282;
  font-weight: 600;
}

.tabs >>> .el-tabs__item:hover {
  color: #4a90e2;
}

.content {
  padding: 25px 0;
}

.topic-items,
.comment-items {
  display: grid;
  gap: 18px;
}

.topic-item,
.comment-item {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(210, 230, 250, 0.8);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.topic-item::before,
.comment-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.03) 0%, rgba(99, 179, 237, 0.03) 100%);
  z-index: 0;
}

.topic-item:hover,
.comment-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
  border-color: rgba(74, 144, 226, 0.5);
}

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.topic-header h3 {
  margin: 0;
  color: #2c5282;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.2s;
  flex: 1;
  padding-right: 10px;
  line-height: 1.4;
}

.topic-header h3:hover {
  color: #4a90e2;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.topic-header .time {
  font-size: 12px;
  color: #5a6c84;
  background: rgba(113, 128, 150, 0.08);
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.topic-content {
  margin-bottom: 15px;
  color: #4a5568;
  line-height: 1.7;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.topic-content p {
  margin: 8px 0;
}

.topic-content ul,
.topic-content ol {
  padding-left: 24px;
  margin: 12px 0;
}

.topic-content ul {
  list-style-type: disc;
}

.topic-content ol {
  list-style-type: decimal;
}

.topic-content li {
  margin-bottom: 6px;
}

.topic-content a {
  color: #4a90e2;
  text-decoration: none;
  font-weight: 500;
}

.topic-content a:hover {
  text-decoration: underline;
}

.topic-content strong,
.topic-content b {
  font-weight: 600;
}

.topic-content em,
.topic-content i {
  font-style: italic;
}

.topic-content u {
  text-decoration: underline;
}

.topic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-top: 12px;
  border-top: 1px dashed rgba(210, 230, 250, 0.8);
}

.topic-footer .el-tag {
  margin-right: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: none;
}

.view-detail {
  color: #4a90e2;
  background: rgba(74, 144, 226, 0.1);
  border: 1px solid rgba(74, 144, 226, 0.3);
  transition: all 0.3s;
  font-weight: 500;
}

.view-detail:hover {
  background: rgba(74, 144, 226, 0.2);
  transform: translateX(3px);
}

.delete-button {
  margin-left: 10px;
  transition: all 0.3s;
}

.delete-button:hover {
  transform: scale(1.05);
}

.comment-header {
  margin-bottom: 10px;
  text-align: right;
  font-size: 12px;
  color: #5a6c84;
  position: relative;
  z-index: 1;
}

.comment-content {
  margin-bottom: 15px;
  color: #4a5568;
  line-height: 1.7;
  font-size: 15px;
  position: relative;
  z-index: 1;
}

.comment-content p {
  margin: 8px 0;
}

.comment-content ul,
.comment-content ol {
  padding-left: 24px;
  margin: 12px 0;
}

.comment-content ul {
  list-style-type: disc;
}

.comment-content ol {
  list-style-type: decimal;
}

.comment-content li {
  margin-bottom: 6px;
}

.comment-content a {
  color: #4a90e2;
  text-decoration: none;
  font-weight: 500;
}

.comment-content a:hover {
  text-decoration: underline;
}

.comment-content strong,
.comment-content b {
  font-weight: 600;
}

.comment-content em,
.comment-content i {
  font-style: italic;
}

.comment-content u {
  text-decoration: underline;
}

.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #5a6c84;
  position: relative;
  z-index: 1;
  padding-top: 12px;
  border-top: 1px dashed rgba(210, 230, 250, 0.8);
}

.comment-footer span {
  flex: 1;
  margin-right: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-detail {
  padding: 20px 0;
}

.topic-detail .topic-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(210, 230, 250, 0.8);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.topic-detail .time,
.topic-detail .view-count,
.topic-detail .reply-count {
  background: rgba(113, 128, 150, 0.08);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
}

.topic-detail .topic-content {
  -webkit-line-clamp: unset;
  overflow: auto;
  max-height: 60vh;
  padding-right: 10px;
}

.topic-detail .topic-content::-webkit-scrollbar {
  width: 6px;
}

.topic-detail .topic-content::-webkit-scrollbar-thumb {
  background: rgba(74, 144, 226, 0.3);
  border-radius: 3px;
}

.topic-detail .topic-content::-webkit-scrollbar-track {
  background: rgba(210, 230, 250, 0.3);
}

.topic-detail .topic-footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(210, 230, 250, 0.8);
}

.el-dialog {
  border-radius: 16px !important;
  overflow: hidden;
}

.el-dialog__header {
  background: linear-gradient(90deg, #f0f9ff, #e1f3ff);
  border-bottom: 1px solid rgba(210, 230, 250, 0.8);
}

.el-dialog__title {
  color: #2c5282;
  font-weight: 600;
}

.el-dialog__body {
  padding: 25px !important;
}

.el-dialog__footer {
  background: #f9fcff;
  border-top: 1px solid rgba(210, 230, 250, 0.8);
}

@media (max-width: 768px) {
  .my-discussion {
    padding: 15px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
  }

  .back-button {
    margin-left: 0;
    width: 100%;
  }

  .user-info {
    width: 100%;
    justify-content: space-between;
  }

  .tabs {
    padding: 0 15px;
  }

  .topic-footer,
  .comment-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .topic-footer .el-tag {
    margin-right: 5px;
    margin-bottom: 5px;
  }
}

.el-button--primary {
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
  transition: all 0.3s;
}

.el-button--primary:hover {
  background: linear-gradient(135deg, #3a7bc8 0%, #4a90e2 100%);
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.35);
  transform: translateY(-2px);
}

.el-button--danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #f28787 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(245, 101, 101, 0.25);
  transition: all 0.3s;
}

.el-button--danger:hover {
  background: linear-gradient(135deg, #f56565 0%, #c96666 100%);
  box-shadow: 0 6px 16px rgba(245, 101, 101, 0.35);
  transform: translateY(-2px);
}

.el-tag--success {
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.15) 0%, rgba(72, 187, 120, 0.1) 100%);
  border: 1px solid rgba(72, 187, 120, 0.3);
  color: #2f855a;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.el-tag--info {
  background: linear-gradient(135deg, rgba(113, 128, 150, 0.1) 0%, rgba(113, 128, 150, 0.05) 100%);
  border: 1px solid rgba(113, 128, 150, 0.2);
  color: #5a6c84;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.el-empty__description p {
  color: #5a6c84;
  font-size: 15px;
}

.el-empty__image {
  width: 120px;
  height: 120px;
}
/* 强制分页居中 */
.my-discussion .pagination-wrapper {
  display: flex !important;
  justify-content: center !important;
  margin: 20px 0 !important;
}
/* 优化分页样式 */
.my-discussion .el-pagination {
  padding: 10px 0;
}

.my-discussion .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  color: white;
  font-weight: bold;
}

.my-discussion .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #4a90e2;
}

.my-discussion .el-pagination.is-background .btn-next, 
.my-discussion .el-pagination.is-background .btn-prev {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(210, 230, 250, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.my-discussion .el-pagination.is-background .btn-next:hover, 
.my-discussion .el-pagination.is-background .btn-prev:hover {
  color: #4a90e2;
  border-color: rgba(74, 144, 226, 0.5);
}
</style>